<template>
  <page-view>
    <div>专门研究表单的demo</div>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="12">
        <div class="left-view">
          <el-form
              :model="queryParams"
              ref="queryForm"
              v-show="showSearch"
              label-width="68px"
              label-position="top"
          >

            <div class="my-form-item">
              <div class="item-left">
                <el-form-item
                    label="姓名"
                    prop="name"
                >
                  <el-input
                      v-model="queryParams.name"
                      placeholder="请输入姓名"
                      clearable
                  />
                </el-form-item>
              </div>
              <div class="item-right">
                <el-form-item
                    label="签发机关"
                    prop="signOrganization"
                >
                  <el-input
                      v-model="queryParams.signOrganization"
                      placeholder="请输入签发机关"
                      clearable
                  />
                </el-form-item>
              </div>
            </div>

            <div class="my-form-item">
              <div class="item-left">
                <el-form-item
                    label="审核状态"
                    prop="verifyStatus"
                >
                  <el-select
                      v-model="queryParams.verifyStatus"
                      placeholder="请选择"
                      style="width:100%"
                  >
                    <el-option
                        v-for="item in queryParamsOptionsStates"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="item-right">
                <el-form-item
                    label="申请人"
                    prop="applicantName"
                >
                  <el-input
                      v-model="queryParams.applicantName"
                      placeholder="请输入申请人姓名"
                      clearable
                  />
                </el-form-item>
              </div>
            </div>

            <div class="my-form-item">
              <div class="item-left">
                <el-form-item
                    label="驾驶证有效期"
                    prop="driverInvalidTime"
                >
                  <!---  复合型输入框    -->
                  <el-input placeholder="请输入内容" v-model="queryParams.driverInvalidTime">
                    <el-button slot="append" icon="el-icon-search">选择</el-button>
                    <!---  插槽方式实现后面的拼接   -->
                    <template #append>
                      <el-button plain @click="selectTimeWithType(0)">选择</el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="item-right">
                <el-form-item
                    label="从业资格证号"
                    prop="qualificationCode"
                >
                  <el-input
                      v-model="queryParams.qualificationCode"
                      placeholder="请输入从业资格证号"
                      clearable
                  />
                </el-form-item>
              </div>
            </div>

            <div class="my-form-item">
              <div class="item-left">
                <el-form-item
                    label="住址"
                    prop="address"
                >
                  <el-input
                      v-model="queryParams.address"
                      placeholder="请输入住址"
                      clearable
                  />
                </el-form-item>
              </div>
              <div class="item-right">
                <el-form-item
                    label="身份证号"
                    prop="address"
                >
                  <el-input
                      v-model="queryParams.idCardNo"
                      placeholder="请输入身份证号"
                      clearable
                  />
                </el-form-item>
              </div>
            </div>

            <div class="my-form-item">
              <div class="item-left">
                <el-form-item
                    label="驾驶证有效期"
                    prop="driverInvalidTime"
                    label-width="120"
                >
                  <el-input
                      v-model="queryParams.driverInvalidTime"
                      placeholder="请输入驾驶证有效期"
                      clearable
                  />
                </el-form-item>
              </div>
              <div class="item-right">
                <el-form-item
                    label="从业资格证有效期"
                    prop="jobInvalidTime"
                    label-width="130"
                >
                  <el-input
                      v-model="queryParams.jobInvalidTime"
                      placeholder="请输入从业资格证有效期"
                      clearable
                  />
                </el-form-item>
              </div>
            </div>

            <el-form-item label="审核状态">
              <el-radio-group v-model="queryParams.status" @input="approveStatusChange">
                <el-radio  label="1">审核通过</el-radio>
                <el-radio  label="2">审核不通过</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="queryParams.status == '2' ">
              <el-input
                  class="right-input"
                  type="textarea"
                  rows="4"
                  placeholder="请填写审核不通过原因"
                  v-model="queryParams.reason"
              >
              </el-input>
            </el-form-item>

            <el-form-item v-if="queryParams.status == '2'">
              <div class="status-reason">
                <el-button
                    v-for="(item, index) in reasons"
                    plain
                    :key="index"
                    style="margin-bottom: 10px"
                    @click="selectReason(index)"
                >
                  {{item}}
                </el-button>
              </div>
            </el-form-item>

            <el-form-item label="资料完善程度">
              <el-radio v-model="queryParams.completeStatus" label="1">一般完善</el-radio>
              <el-radio v-model="queryParams.completeStatus" label="2">非常完善</el-radio>
              <el-radio v-model="queryParams.completeStatus" label="3">特批车辆</el-radio>
            </el-form-item>

            <el-form-item label="附件上传">
              <el-upload
                  :class="{disabled:uploadConfig.uploadDisabled}"
                  v-model:file-list="queryParams.fileList"
                  :action="uploadConfig.action"
                  list-type="picture-card"
                  :limit="uploadConfig.max"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-change="handelFileChange"
                  :before-upload="handelBeforeUpload"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handelSubmit">提交</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right-view">
          <div class="right-item-title">行驶证</div>
          <div class="id-card-image">
            <image-preview
                class="id-card-z"
                :width="360"
                :height="170"
                src="https://wlhyos-server-test.oss-cn-hangzhou.aliyuncs.com/8208a66e4f37e25c767998a63b7e12dd.jpg"
            />

            <image-preview
                class="id-card-f"
                :width="360"
                :height="170"
                src="https://wlhyos-server-test.oss-cn-hangzhou.aliyuncs.com/8208a66e4f37e25c767998a63b7e12dd.jpg"
            />
          </div>

          <div class="right-item-title">道路运输证</div>
          <div class="job-card">
            <image-preview
                :width="360"
                :height="170"
                src="https://wlhyos-server-test.oss-cn-hangzhou.aliyuncs.com/8208a66e4f37e25c767998a63b7e12dd.jpg"
            />
          </div>

          <div class="right-item-title">人车合照</div>
          <div class="job-card">
            <image-preview
                :width="360"
                :height="170"
                src="https://wlhyos-server-test.oss-cn-hangzhou.aliyuncs.com/8208a66e4f37e25c767998a63b7e12dd.jpg"
            />
          </div>
        </div>
      </el-col>
    </el-row>

    <!--  弹窗  -->
    <el-dialog v-model="alertConfig.dialogVisible" :title="alertConfig.title" width="30%" center>
      <div style="display: flex;align-items: center">
        <el-date-picker
            v-model="alertConfig.value"
            type="date"
            placeholder="选择开始日期"
        />
        <div style="width: 50px;text-align: center;">至</div>

        <el-date-picker
            v-if="alertConfig.value2 != '长期'"
            v-model="alertConfig.value2"
            type="date"
            placeholder="选择结束日期"
            style="margin-right: 10px"
        />
        <div
            v-if="alertConfig.value2 && alertConfig.value2 == '长期'"
            style="margin-right: 10px"
        >
          长期
        </div>
        <el-checkbox
            v-if="!alertConfig.value2 || alertConfig.value2 == '长期'"
            v-model="alertConfig.checked"
            label="长期"
            size="large"
            @change="checkBoxChanged"
        />
      </div>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="alertConfig.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

  </page-view>
</template>

<script>
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "formdemo",
  components: {ImagePreview},
  data() {
    return {
      // 是否显示搜索
      showSearch:true,

      // 查询参数相关
      queryParams:{
        pageNum:1,
        pageSize:10,
        name:null,
        qualificationCode:null,
        signOrganization:null,
        verifyStatus:null,
        applicantName:null,
        address:null,
        idCardNo:null,
        driverInvalidTime:null,
        driverInvalidTimeStart:null,
        // 驾驶证有效期结束时间 无值则为长期
        driverInvalidTimeEnd:'2023-09-25',
        jobInvalidTime:null,
        status:null,
        completeStatus:null,
        reason:null,
        fileList:[
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
          {
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          },
        ],
      },

      // 审核状态
      queryParamsOptionsStates: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "通过",
        },
        {
          value: "1",
          label: "不通过",
        },
        {
          value: "2",
          label: "待审核",
        },
      ],

      // 审核不通过原因
      reasons:['请上传驾驶证', '驾驶证模糊', '驾驶证过期', '身份证和驾驶证不是同一个人', '身份证模糊', '请上传身份证', '身份证过期', '请上传身份证国徽面', '身份证与认证名称不一致'],

      // 弹窗配置数据
      alertConfig:{
        dialogVisible:false,
        title:'',
        value:null,
        value2:null,
        checked:false,
      },

      // 文件上传配置项
      uploadConfig:{
        max:6,
        action:'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
        uploadDisabled:false,
      },

    }
  },
  methods:{
    /**
     * 审核状态变更
     */
    approveStatusChange() {
      console.log('审核状态选择：', this.queryParams);
    },

    /**
     * 选择审核不通过理由
     * @param index
     */
    selectReason(index) {
      this.queryParams.reason = this.reasons[index];
    },

    /**
     * 选择时间
     */
    selectTimeWithType(type) {
      if (type == 0) {
        this.alertConfig.title = "驾驶证有效期";
        this.alertConfig.value = this.queryParams.driverInvalidTimeStart;
        this.alertConfig.value2 = this.queryParams.driverInvalidTimeEnd;
        this.alertConfig.checked = this.isChecked();
      }
      this.alertConfig.dialogVisible = true;
    },

    /**
     * 弹窗确认时间选择
     */
    handelConfirm() {

    },

    /**
     * 弹窗checkbox选择事件
     * @param e
     */
    checkBoxChanged(e) {
      console.log('e：', e);
      this.alertConfig.value2 = e ? '长期' : null;
    },

    /**
     * 是否被选择
     * @returns {*|boolean}
     */
    isChecked() {
      return this.alertConfig.value2  != '长期' ? false : true;
    },

    /**
     * 图片预览
     */
    handlePictureCardPreview() {

    },

    /**
     * 图片移除
     */
    handleRemove(uploadFile, uploadFiles) {
      console.log('handleRemove uploadFiles:', uploadFiles);
      this.uploadConfig.uploadDisabled = uploadFiles.length == this.uploadConfig.max;
    },

    /**
     * 文件状态变更 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     */
    handelFileChange(uploadFile, uploadFiles) {
      console.log('uploadFile:', uploadFile);
      if (uploadFile && uploadFile.url) {
        this.getImageSize(uploadFile.url).then(r => {
          let afterFileHeight = r.height
          let afterFileWidth = r.width
          console.log(afterFileWidth, afterFileHeight, 'afterFileWidth')
        });
      }
      console.log('handelFileChange uploadFiles:', uploadFiles);
      this.uploadConfig.uploadDisabled = uploadFiles.length == this.uploadConfig.max;
    },

    /**
     * 获取图片宽高
     * @param result 图片本地路径
     * @returns {Promise<unknown>}
     */
    getImageSize(result) {
      return new Promise(function (resolve, reject) {
        let img = new Image();
        img.src = result;
        img.onload = function () {
          // 注意只有onload以后才可以拿到图片信息
          resolve({
            width: img.width,
            height: img.height
          })
        }
      })
    },

    /**
     * 文件上传时的钩子
     * @param uploadFile
     */
    handelBeforeUpload(uploadFile) {
      console.log('handelBeforeUpload uploadFile:', uploadFile);
      if (uploadFile.type !== 'image/jpeg') {
        this.$message.error('Avatar picture must be JPG format!')
        return false;
      }
      if (uploadFile.size / 1024 / 1024 > 2) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
        return false;
      }
      return true
    },

    handelSubmit() {
      console.log('表单提交');
    },

    resetQuery() {
      console.log('表单重置');
    },
  }
}
</script>

<style lang="scss">
.left-view {
  padding: 0 15px 0 0;
  .my-form-item {
    display: flex;
    justify-content: space-between;
    .item-left, .item-right {
      width: 50%;
    }

    .item-left {
      margin-right: 50px;
    }

    // 审核不通过原因
    .status-reason {
      display: flex;
      flex-wrap: wrap;
    }
  }
}

.right-view {
  margin-right: 20px;
  .right-item-title {
    font-size: 15px;
    padding: 15px 0;
    font-weight: 500;
    text-align: left;
  }

  .id-card-image {
    display: flex;
    //justify-content: center;

    .id-card-z {
      margin-right: 30px;
    }
  }
}
</style>

<!--当文件上传数量达到限制时 给默认的上传图标加一个样式 隐藏-->
<style lang="scss">
.disabled .el-upload--picture-card {
  display: none !important;
}
</style>
